<template>
  <div class="">
    <!-- 表头信息-->
    <div class="oolong-table-thead">
      <table class="table table-bordered table-align">
        <colgroup>
          <col v-for="col in colgroup" :width="col">
        </colgroup>
        <thead>
        <tr>
          <th>
            <input type="checkbox" id="all" name="all" v-model="checkNames[0]" value="全部" style="vertical-align: -2px;"
                   @click="checkBox"/>
            <label for="all" style="margin-bottom:0;font-weight:normal">全部</label>
          </th>
          <th>编号</th>
          <th v-for="title in tableTh" :class="{'hide':title.keyId,'oolong-hide':title.keyParentId}">
            <span>{{title.th_title}}</span>
          </th>
          <th v-if="showEditor">操作</th>
        </tr>
        </thead>
      </table>
    </div>
    <!--表格信息-->
    <div class="oolong-table">
      <table class="table table-bordered table-align">
        <colgroup>
          <col v-for="col in colgroup" :width="col">
        </colgroup>
        <!--表格内容信息-->
        <!--无数据-->
        <tbody v-if="!tableInfo.length">
        <td colspan="13"><span style="text-align:center;display:block;color:red">没有数据！</span></td>
        </tbody>
        <!--有数据-->
        <tbody>
        <tr v-for="(entry,index) in tableInfo">
          <td>
            <input type="checkbox" :id="tableInfo[index].id" v-model="checkNames[index+1]" @click="deleteCustomer"
                   :title="tableInfo[index].name"/>
          </td>

          <td><label>{{index+1}}</label></td>

          <td v-for="title in tableTh" :class="{'hide':title.keyId,'oolong-hide':title.keyParentId}">
            <span v-if="title.keyStatus">{{this.tableInfo[index].status==1?'有效':'无效'}}</span>
            <span v-if="title.keyUrl">
              <img :src="entry[title.name]">
            </span>
            <span v-else>{{entry[title.name]}}</span>
          </td>

          <td v-if="showEditor">
            <a href="javascript:;" style="color:blue" @click="loadEntry(tableInfo[index].id)">维护</a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  //  var deleteJson = {deleteArrayId: []};
  import '../resources/css/components/oolong-table.scss'
  export default{
    data(){
      return {
        "deleteJson": {
          deleteArrayId: []
        }
//        colgroup_test: ["5%", "5%", "13%", "7%", "7%", "7%", "13%", "10%", "10%", "23%"],
//        checkNames: [false, false, false, false, false, false, false, false, false, false, false]
      }
    },
    props: {
      //username: String,
      colgroup: Array,
      //接收表格头
      tableTh: Array,
      //接收数据
      tableInfo: Array,
      checkNames: Array,
      showEditor: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      clearSelect(){
        this.deleteJson.deleteArrayId = [];
//        alert("到底清空没有"+JSON.stringify(this.deleteJson));
//        alert("执行 ")
      },
      //荣 选中当前checked = true 也就是要删除的数据的id传输到父组件
      deleteCustomer(e){
        var jsonId = {
          "id": e.currentTarget.id,
          "customerName": e.currentTarget.title,
          checked: e.currentTarget.checked
        };
        this.deleteJson.deleteArrayId.push(jsonId);
        //删除
        if (e.currentTarget.checked == false) {
          var arr = this.deleteJson.deleteArrayId;
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].checked == false) {
              for (var j = 0; j < arr.length; j++) {
                if (arr[j].id == arr[i].id) {
                  arr.splice(i, 1);
                  arr.splice(j, 1);
                }
//                alert("最终传输的"+JSON.stringify(this.deleteJson))
              }
            }
          }
          this.$dispatch("selected-json", this.deleteJson);
          //alert("最终传输的"+JSON.stringify(this.deleteJson))
        }
        //直接添加
        else {
          for (var i = 0; i < this.deleteJson.deleteArrayId.length; i++) {
            if (this.deleteJson.deleteArrayId[i].checked == true) {
//              alert(JSON.stringify(this.deleteJson))
              this.$dispatch("selected-json", this.deleteJson);
            }
          }
        }
      },
      //全选事件
      checkBox(){
        //判断全选按钮
        if (this.checkNames[0] == false) {
          for (var i = 0; i < this.checkNames.length; i++) {
            this.checkNames[i] = true;
          }
          for (var m = 0; m < this.tableInfo.length; m++) {
            this.deleteJson.deleteArrayId.push({
              "id": this.tableInfo[m].id,
              "customerName": this.tableInfo[m].name,
              checked: true
            })
          }
          this.$dispatch("selected-json", this.deleteJson);
        } else {
          for (var i = 0; i < this.checkNames.length; i++) {
            this.checkNames[i] = false;
          }
        }
      },
      //派发子组件要执行的方法对应id
      loadEntry: function (key) {
        this.$dispatch('editor-entry', key);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
